<template>
	<!-- 提现成功抽屉 -->
	<u-popup v-model="showSuccessDrawer" mode="bottom" border-radius="30" safe-area-inset-bottom>
		<view class="success-drawer">
			<!-- 头部 -->
			<view class="drawer-header">
				<view class="success-icon">
					<u-icon name="checkmark-circle-fill" color="#36BE6A" size="80"></u-icon>
				</view>
				<view class="success-title">{{title}}</view>
				<view class="success-subtitle">预计{{expectedTime}}到账</view>
			</view>

			<!-- 提现信息 -->
			<view class="withdraw-info">
				<view class="info-item">
					<text class="info-label">提现金额</text>
					<text class="info-value">￥{{money}}</text>
				</view>
				<view class="info-item">
					<text class="info-label">到账方式</text>
					<text class="info-value">{{method}}</text>
				</view>
				<view class="info-item">
					<text class="info-label">服务费</text>
					<text class="info-value">￥{{fuwuFee}}</text>
				</view>
			</view>

			<!-- 时间轴 -->
			<view class="timeline">
				<view class="timeline-title">提现进度</view>
				<view class="timeline-item" :class="{'active':true}">
					<view class="timeline-dot"></view>
					<view class="timeline-content">
						<view class="timeline-title-text">发起提现</view>
						<view class="timeline-time">{{currentTime}}</view>
					</view>
				</view>
				<view class="timeline-item" :class="{'active':status>0}">
					<view class="timeline-dot"></view>
					<view class="timeline-content">
						<view class="timeline-title-text">银行处理中</view>
						<view class="timeline-time">预计{{expectedTime}}前到账</view>
					</view>
				</view>
				<view class="timeline-item" :class="{'active':status>1}">
					<view class="timeline-dot"></view>
					<view class="timeline-content">
						<view class="timeline-title-text">到账成功</view>
						<view class="timeline-time">{{time}}</view>
					</view>
				</view>
			</view>

			<!-- 底部按钮 -->
			<view class="drawer-footer">
				<u-button type="primary" shape="circle" @click="viewWithdrawList">查看提现记录</u-button>
				<u-button type="default" shape="circle" style="margin-top: 20rpx;" @click="closeSuccessDrawer">完成</u-button>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name:"tixian-success",
		props:{
			title:{
				type:String,
				default:'提现申请已提交'
			},
			value:{
				type:Boolean,
				default:true
			},
			status:{
				type:Number,
				default:0
			},
			content:{
				type:String,
				default:''
			},
			time:{
				type:String,
				default:new Date().toLocaleString()
			},
			money:{
				type: [String, Number],
				default: ''
			},
			method:{
				type:String,
				default:"微信零钱"
			},
			currentTime:{
				type:String,
				default: (() => {
					const pad = n => n < 10 ? '0' + n : n;
					const d = new Date();
					return `${d.getFullYear()}/${pad(d.getMonth()+1)}/${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
				})()
			},
			fuwuFee:{
				type:Number,
				default:0
			},
			duration:{
				type:Number,
				default:30
			},
			navUrl:{
				type:String,
				default:'/pageA/Store/Moneyjl'
			},
			expectedTime:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				showSuccessDrawer:this.value
			};
		},
		mounted(){
			console.log(this.value)
			console.log(this.showSuccessDrawer)
			console.log(this.expectedTime)
			console.log('money',this.money)
		},
		watch:{
			value(newVal){
				this.showSuccessDrawer = newVal
			}
		},
		methods:{
			closeSuccessDrawer(){
				this.$emit('input',false)
			},
			viewWithdrawList(){
				uni.navigateTo({
					url:this.navUrl
				})
			}
		}
	}
</script>

<style>
.success-drawer {
		padding: 40rpx 30rpx 30rpx;
		max-height: 100vh;
		overflow-y: auto;
	}
	
	.drawer-header {
		text-align: center;
		margin-bottom: 40rpx;
	}
	
	.success-icon {
		margin-bottom: 20rpx;
	}
	
	.success-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}
	
	.success-subtitle {
		font-size: 28rpx;
		color: #666;
	}
	
	.withdraw-info {
		background: #f8f9fa;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 40rpx;
	}
	
	.info-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}
	
	.info-item:last-child {
		margin-bottom: 0;
	}
	
	.info-label {
		font-size: 28rpx;
		color: #666;
	}
	
	.info-value {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}
	
	.timeline {
		margin-bottom: 40rpx;
	}
	
	.timeline-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
	}
	
	.timeline-item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 30rpx;
		position: relative;
	}
	
	.timeline-item:last-child {
		margin-bottom: 0;
	}
	
	.timeline-dot {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background: #ddd;
		margin-right: 20rpx;
		margin-top: 8rpx;
		flex-shrink: 0;
	}
	
	.timeline-item.active .timeline-dot {
		background: #36BE6A;
	}
	
	.timeline-content {
		flex: 1;
	}
	
	.timeline-title-text {
		font-size: 30rpx;
		color: #333;
		margin-bottom: 8rpx;
		font-weight: 500;
	}
	
	.timeline-time {
		font-size: 26rpx;
		color: #999;
	}
	
	.timeline-item.active .timeline-title-text {
		color: #36BE6A;
		font-weight: bold;
	}
	
	.drawer-footer {
		text-align: center;
	}
</style>